<template>
  <Layout class="main">
    <Sider class="side-menu" hide-trigger collapsible :width="240" ref="mainSider" v-model="isCollapsed">
      <side-menu :menu-list="menuList" :active-name="$route.name" :is-collapsed="isCollapsed"></side-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar @on-collapsed-sider="collapsedSider" :is-collapsed="isCollapsed"></header-bar>
      </Header>
      <Content class="main-content">
        <router-view/>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import './main.less'
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'

export default {
  components: {
    SideMenu,
    HeaderBar
  },
  data() {
    return {
      // 是否展开侧边栏
      isCollapsed: false
    }
  },
  computed: {
    // 导航菜单列表
    menuList() {
      return this.$store.state.routesConfig
    }
  },
  methods: {
    // 展开侧边栏
    collapsedSider() {
      this.$refs.mainSider.toggleCollapse()
    }
  }
}
</script>
